<template>
    <div>
        <div style="margin: 20px 100px;">
            <button @click="exportModel">导入模型</button>
        </div>
        <div id="webgl3"></div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

/** 创建场景对象Scene*/
let scene = new THREE.Scene();
let modelGroups = [];
let valveObj1 = null;

/** 光源设置 */
// 点光源
// var pointLights = new THREE.PointLight(0xff00ff, 1); //点光源
// pointLights.position.set(0,200,200); //光源位置
// scene.add(pointLights); //点光源添加到场景中
// // 点光源辅助观察
// const pointLightHelper = new THREE.PointLightHelper(pointLights, 10);
// scene.add(pointLightHelper);
// 平行光
const directionalLights = new THREE.DirectionalLight(0xffffff, 1);
directionalLights.position.set(0, 200, 200);
scene.add(directionalLights);
const directionalLights2 = new THREE.DirectionalLight(0xffffff, 1);
directionalLights2.position.set(0, 200, -200);
scene.add(directionalLights2);
const directionalLights3 = new THREE.DirectionalLight(0xffffff, 1);
directionalLights3.position.set(200, 200, 0);
scene.add(directionalLights3);
const directionalLights4 = new THREE.DirectionalLight(0xffffff, 1);
directionalLights4.position.set(-200, 200, 0);
scene.add(directionalLights4);
// const dirLightHelper = new THREE.DirectionalLightHelper(directionalLights, 5,0xff0000);
// scene.add(dirLightHelper);
//环境光
var ambientLights = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLights);

/** 相机设置 */
let c_width = 1200;
let c_height = 800;
// let c_k = c_width/c_height;
// let c_s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
// let camera = new THREE.OrthographicCamera(-c_s*c_k, c_s*c_k, c_s, -c_s, 1, 2000);//正交投影相机对象,地图时使用
let camera = new THREE.PerspectiveCamera(); //透视相机，模拟人眼
camera.position.set(-250, 250, 0);// 设置相机位置
camera.lookAt(0, 0, 0);//指向坐标原点
// camera.lookAt(scene.position); //设置相机方向（指向的场景对象）
/**创建的渲染对象 */
var renderer = new THREE.WebGLRenderer();

onMounted(()=>{
    initRender();
    setAxisHelper();

    exportModel();
})

//渲染
const initRender = ()=>{
    renderer.setSize(c_width, c_height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.getElementById('webgl3').appendChild(renderer.domElement);
    doRendering();
    new OrbitControls(camera, renderer.domElement);//创建控件对象
}
//鼠标操作后渲染
const doRendering = ()=>{
    renderer.render(scene,camera);//执行渲染操作
    requestAnimationFrame(doRendering);
}
// 辅助坐标系
const setAxisHelper = ()=>{
    var axisHelper = new THREE.AxesHelper(450); // 参数450表示坐标系大小，可以根据场景大小去设置
    scene.add(axisHelper);
}

//导入gltf模型
const exportModel = ()=>{

    const loader = new GLTFLoader();
    loader.load('/static/model/二氧化碳主机.glb', function ( gltf ) {
        // console.log('控制台查看加载gltf文件返回的对象结构',gltf);
        // console.log('gltf对象场景属性',gltf.scene);
        gltf.scene.scale.set(10,10,10);//网格模型缩放
        // 返回的场景对象gltf.scene插入到threejs场景中
        gltf.scene.traverse(function (item) {
            // console.log(item);
            // item.castShadow = true;
            // if (item.type === 'Mesh') {
            //     // 批量更改所有Mesh的材质
            //     item.material = new THREE.MeshLambertMaterial({
            //         map: item.material.map, //获取原来材质的颜色贴图属性值
            //         color: item.material.color
            //     })
            // }
            if(item.name == '阀门1'){
                valveObj1 = item
            }
        })
        scene.add( gltf.scene );
    })
}


renderer.domElement.addEventListener('click', function (event) {
    // .offsetY、.offsetX以canvas画布左上角为坐标原点,单位px
    const px = event.offsetX;
    const py = event.offsetY;
    //屏幕坐标px、py转WebGL标准设备坐标x、y
    //width、height表示canvas画布宽高度
    const x = (px / c_width) * 2 - 1;
    const y = -(py / c_height) * 2 + 1;
    //创建一个射线投射器`Raycaster`
    const raycaster = new THREE.Raycaster();
    //.setFromCamera()计算射线投射器`Raycaster`的射线属性.ray
    // 形象点说就是在点击位置创建一条射线，射线穿过的模型代表选中
    raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
    //.intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算
    // 未选中对象返回空数组[],选中一个对象，数组1个元素，选中两个对象，数组两个元素
    const intersects = raycaster.intersectObjects([valveObj1]);
    // intersects.length大于0说明，说明选中了模型
    if (intersects.length > 0) {
        let modelObj = valveObj1
        modelObj.material.color.set(0x00ff00);
    }
})


</script>

<style lang="scss" scoped>

</style>